<template>
	<view class="body" :style="{'height':screenHeight}">
		<!-- 新聊天与历史 -->
		<u-navbar :title=title style="color: #3e4d65;" :bgColor="bgColor" placeholder leftIconSize="0"></u-navbar>
		<view class="body-header">
			<view style="width: 160rpx;"><u--text prefixIcon="list" iconStyle="font-size: 19px" text=" 聊天历史"></u--text>
			</view>
			<view style="width: 160rpx;" @click=""><u--text prefixIcon="plus" iconStyle="font-size: 19px"
					text="新增聊天"></u--text>
			</view>
		</view>


		<!-- 聊天窗口 -->
		<scroll-view :scroll-top="scrollTop"
			style="width: 90%;height: 880rpx; margin: auto;border: 1px solid #3c9cff; background-color: #fcfcfc;">

		</scroll-view>

		<!-- 提示 -->
		<scroll-view scroll-x class="navscroll">
			<view class="item" v-for="(item,index) in tipList" :key="index" @click="changeTip(item.id)"><u--text
					:lines="4" align="center" :text="item.content"></u--text></view>
		</scroll-view>

		<!-- 底部窗口 -->
		<view class="body-input">
			<u--input border="none" placeholder="请输入内容" :value="content" clearable></u--input>
			<u-button text="发送" type="primary"></u-button>
		</view>


		<!-- 底部导航栏 -->
		<c-tabbar></c-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				screenHeight: (this.$store.height - 100) + "rpx",
				title: "智能问答",
				bgColor: "#fff",
				scrollTop: 0,
				content: "",
				tipList: []
			};
		},
		onLoad() {
			this.tipList = [{
				id: 1,
				content: "指令合集"
			}, {
				id: 2,
				content: "程序员"
			}, {
				id: 2,
				content: "程序员"
			}, {
				id: 2,
				content: "程序员"
			}, {
				id: 2,
				content: "程序员"
			}, {
				id: 2,
				content: "程序员"
			}, {
				id: 2,
				content: "程序员"
			}, {
				id: 2,
				content: "程序员"
			}, {
				id: 2,
				content: "程序员"
			}, {
				id: 2,
				content: "程序员"
			}]
		},
		methods: {
			changeTip(id) {
				console.log(id);
			}
		}
	}
</script>

<style lang="scss">
	.body {
		width: 100%;

		.body-header {
			margin: 10rpx auto;
			width: 90%;
			display: flex;
			justify-content: space-between;
		}

		.navscroll {
			white-space: nowrap; // 设置内容不换行
			width: 90%;
			margin: 10rpx auto;
			background: #F7F8FA; // 设置滑动栏的颜色

			// 通过渗透来消除状态栏下方的下划线
			/deep/ ::-webkit-scrollbar {
				width: 4px !important;
				height: 1px !important;
				overflow: auto !important;
				background: transparent !important;
				-webkit-appearance: auto !important;
				display: block;
			}

			.item {
				display: inline-block; // 设置为行内块
				width: 160rpx;
				margin-right: 10rpx;
				border: #3c9cff 1px solid;
				border-radius: 15px;
			}

		}

		.body-input {
			width: 90%;
			height: 70rpx;
			margin: 5rpx auto;
			padding: 0 10rpx;
			display: flex;
			justify-content: space-between;

			border: 1px #007aff solid;
			border-radius: 10px;

			.u-input__content__field-wrapper__field {
				height: 70rpx !important;
			}

			.u-button {
				border-radius: 10px;
				width: 100rpx !important;
				height: 60rpx !important;
				margin: 5rpx !important;
			}
		}
	}
</style>